<template>
  <div class="aichat-container">
    <!-- 可调整宽度的拖动线 -->
    <div class="resizer" @mousedown="startResize" :style="{ left: leftWidth + '%' }"></div>
    
    <!-- 左侧文件显示区域 -->
    <div class="file-display" :style="{ width: leftWidth + '%' }">
      <!-- 顶部导航区 -->
      <div class="file-nav">
        <div class="left-nav">
          <div class="back-btn" @click="navigateToHome">
            <img src="../assets/icons/返回.svg" alt="返回" />
          </div>
          <div class="tab-buttons">
            <button 
              class="tab-btn" 
              :class="{ active: activeTab === 'original' }" 
              @click="activeTab = 'original'"
            >
              招标原文
            </button>
            <button 
              class="tab-btn" 
              :class="{ active: activeTab === 'structured' }" 
              @click="activeTab = 'structured'"
            >
              结构化信息抽取
            </button>
            <button 
              class="tab-btn" 
              :class="{ active: activeTab === 'semantic' }" 
              @click="activeTab = 'semantic'"
            >
              条款语义分析
            </button>
            <button 
              class="tab-btn" 
              :class="{ active: activeTab === 'compliance' }" 
              @click="activeTab = 'compliance'"
            >
              合规性检查
            </button>
          </div>
        </div>
        <div class="directory-icon" @mouseenter="showDirectory = true" v-if="activeTab === 'original'">
          <img src="../assets/icons/目录.svg" alt="目录" />
          
          <!-- 目录展示 -->
          <div class="directory-container" v-if="showDirectory" @mouseleave="showDirectory = false">
            <div class="directory-item" v-for="(item, index) in directoryItems" :key="index" @click="scrollToChapter(item.id)" @mouseenter="item.hover = true" @mouseleave="item.hover = false" :class="{ 'hover': item.hover }">
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>

      <!-- 文件内容区域 -->
      <div class="file-content" :class="{ 'no-scroll': activeTab !== 'original' }" ref="fileContentRef">
        <!-- 招标原文内容 -->
        <div v-if="activeTab === 'original'" class="file-original scanning-effect" :class="{ 'scanning-active': isScanning }">
          <div v-if="isScanning" class="scan-line"></div>
          <div class="document-content">
            <h2>XX智慧城市数据中心基础设施建设项目（一期）<br>高压变压器采购公告</h2>
            
            <h3 id="chapter-1">第一章 总则</h3>
            <p><strong>1.1 项目背景：</strong>为满足XX智慧城市数据中心的电力需求，保障数据中心稳定、高效运行，现对数据中心一期项目所需的高压变压器进行公开招标采购。本项目旨在引进技术先进、质量可靠、节能环保的电力设备，为智慧城市的大数据运算和存储提供坚实的能源基础。</p>
            <p><strong>1.2 项目名称：</strong>XX智慧城市数据中心基础设施建设项目（一期）- 高压变压器采购</p>
            <p><strong>1.3 招标编号：</strong>ZC-TECH-2024-0715</p>
            <p><strong>1.4 招标范围：</strong>本次招标范围包括但不限于：高压变压器的设计、制造、运输、安装指导、调试、试运行、技术培训以及为期24个月的质保服务。详细技术规格见第三章。</p>
            <p><strong>1.5 招标人：</strong>XX城市建设投资集团有限公司</p>
            <p><strong>1.6 资金来源：</strong>企业自筹，已落实。</p>

            <h3 id="chapter-2">第二章 投标人资格要求</h3>
            <p><strong>2.1 基本资格：</strong>投标人必须是在中华人民共和国境内注册、具有独立法人资格的制造商，持有有效的营业执照、税务登记证、组织机构代码证（或三证合一的营业执照）。注册资本金不低于5000万元人民币。</p>
            <p><strong>2.2 生产能力：</strong>投标人必须具备所投产品的生产能力，具有有效的ISO9001质量管理体系认证、ISO14001环境管理体系认证及OHSAS18001职业健康安全管理体系认证。须提供认证证书复印件。</p>
            <p><strong>2.3 财务要求：</strong>投标人近三年（2021-2023）财务状况良好，连续盈利，须提供经会计师事务所审计的财务报表（包括资产负债表、利润表、现金流量表）。不得处于被责令停业、财产被接管、冻结或破产状态。</p>
            <p><strong>2.4 业绩要求：</strong>投标人自2021年1月1日以来，须具有至少3个单项合同金额不低于500万元人民币的10kV等级干式变压器供货业绩。须提供合同关键页（首页、金额页、签字盖章页）复印件及用户验收报告或使用证明。</p>
            <p><strong>2.5 信誉要求：</strong>投标人近三年内无重大违法记录，未被列入"信用中国"网站的失信被执行人名单。须提供网站截图或信用报告。</p>
            <p><strong>2.6 其他：</strong>本项目不接受联合体投标，不接受代理商投标。法定代表人为同一个人的两个及两个以上法人，母公司、全资子公司及其控股公司，都不得在同一货物招标中同时投标。</p>

            <h3 id="chapter-3">第三章 技术规格与要求</h3>
            <p><strong>3.1 货物清单：</strong></p>
            <table class="tender-spec-table">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>设备名称</th>
                        <th>型号</th>
                        <th>额定容量(kVA)</th>
                        <th>数量(台)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>环氧树脂浇注干式电力变压器</td>
                        <td>SCB18-2000/10</td>
                        <td>2000</td>
                        <td>4</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>环氧树脂浇注干式电力变压器</td>
                        <td>SCB18-1600/10</td>
                        <td>1600</td>
                        <td>2</td>
                    </tr>
                </tbody>
            </table>
            <p><strong>3.2 主要技术参数：</strong></p>
            <ul>
                <li>绝缘等级：F级，产品整体温升应按H级考核。</li>
                <li>能效等级：一级能效</li>
                <li>电压组合：10kV / 0.4kV</li>
                <li>阻抗电压：标准阻抗</li>
                <li>温升限值：符合GB1094.11-2007标准</li>
                <li>噪音水平：低于国家标准，需提供测试报告。</li>
            </ul>
            <p><strong>3.3 工艺与材料：</strong>铁芯应采用优质高导磁晶粒取向冷轧硅钢片，箔式线圈采用优质铜箔绕制，树脂采用国际知名品牌环氧树脂进行真空浇注，确保产品的高可靠性和低损耗。</p>
            <p><strong>3.4 检验与测试：</strong>所有设备出厂前需完成所有例行试验、型式试验和特殊试验，并提供完整的试验报告。招标人有权在生产过程及出厂前进行监造和抽检，相关费用由投标人承担。</p>

            <h3 id="chapter-4">第四章 商务要求</h3>
            <p><strong>4.1 付款方式：</strong>合同签订后15个工作日内支付合同总额的30%作为预付款；全部货物运抵现场并开箱验收合格后30个工作日内支付合同总额的60%；剩余10%作为质保金，在质保期满后无任何质量问题，凭双方签署的质保期结束确认书，于30个工作日内一次性无息付清。</p>
            <p><strong>4.2 质保期：</strong>自项目最终验收合格签字之日起，提供不少于24个月的免费质保服务。质保期内，投标人须提供7x24小时响应服务，并在接到通知后48小时内到达现场处理问题。</p>
            <p><strong>4.3 交付周期：</strong>合同签订生效后60个日历日内完成全部货物的生产及交付至项目现场指定地点。任何延迟交付将按每日合同总额的0.5%进行罚款，罚款总额不超过合同总额的5%。</p>
            <p><strong>4.4 包装与运输：</strong>货物包装应满足长途运输、防潮、防震、防锈的要求，确保货物安全无损地运抵目的地。所有运输及保险费用均由投标人承担。</p>

            <h3 id="chapter-5">第五章 投标文件要求</h3>
            <p><strong>5.1 投标文件构成：</strong>投标文件应分为商务部分、技术部分和价格部分，分别装订成册。具体格式参照附件。</p>
            <p><strong>5.2 份数与密封：</strong>投标人需提交正本一份，副本四份。所有投标文件均须密封包装，并在封口处加盖单位公章。</p>
            <p><strong>5.3 截止时间：</strong>2024年8月15日 上午09:30（北京时间）。任何在此时间之后递交的投标文件将被拒收。</p>
            <p><strong>5.4 递交地点：</strong>XX市公共资源交易中心三楼302开标室</p>
            <p><strong>5.5 联系方式：</strong><br/>招标代理机构：卓越项目管理有限公司<br/>联系人：李先生<br/>电话：010-88886666<br/>邮箱：zb@zhuoyuepm.com</p>
          </div>
          <!-- 四个蓝色边角 -->
          <div v-if="isScanning" class="corner-decoration top-left"></div>
          <div v-if="isScanning" class="corner-decoration top-right"></div>
          <div v-if="isScanning" class="corner-decoration bottom-left"></div>
          <div v-if="isScanning" class="corner-decoration bottom-right"></div>
        </div>

        <!-- 结构化信息抽取内容 -->
        <div v-if="activeTab === 'structured'" class="file-structured">
          <h2>关键信息抽取</h2>
          <table class="structured-table">
            <thead>
              <tr>
                <th>条目</th>
                <th>内容</th>
                <th>备注</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><strong>项目名称</strong></td>
                <td>XX智慧城市数据中心基础设施建设项目（一期）- 高压变压器采购</td>
                <td><span class="tag tag-primary">核心信息</span></td>
              </tr>
              <tr>
                <td><strong>项目编号</strong></td>
                <td>ZC-TECH-2024-0715</td>
                <td><span class="tag tag-primary">核心信息</span></td>
              </tr>
              <tr>
                <td><strong>招标单位</strong></td>
                <td>XX城市建设投资集团有限公司</td>
                <td></td>
              </tr>
              <tr>
                <td><strong>资金来源</strong></td>
                <td>企业自筹</td>
                <td class="note">已落实</td>
              </tr>
              <tr>
                <td><strong>投标截止时间</strong></td>
                <td>2024年8月15日 09:30 (北京时间)</td>
                <td class="note-important"><span class="tag tag-danger">重要</span> 必须在此时间前提交</td>
              </tr>
              <tr>
                <td><strong>递交地点</strong></td>
                <td>XX市公共资源交易中心三楼302开标室</td>
                <td></td>
              </tr>
              <tr>
                <td><strong>设备需求</strong></td>
                <td>
                  <div class="device-info">
                    <div class="device-item">SCB18-2000/10 (2000kVA) × 4台</div>
                    <div class="device-item">SCB18-1600/10 (1600kVA) × 2台</div>
                  </div>
                </td>
                <td><span class="tag tag-warning">关键参数</span></td>
              </tr>
              <tr>
                <td><strong>质保期</strong></td>
                <td>24个月</td>
                <td><span class="tag tag-info">免费质保</span></td>
              </tr>
              <tr>
                <td><strong>交付周期</strong></td>
                <td>合同签订后60个日历日</td>
                <td class="note-important"><span class="tag tag-danger">重要</span> 有延期罚款条款</td>
              </tr>
              <tr>
                <td><strong>付款方式</strong></td>
                <td>
                  <div class="payment-terms">
                    <div>预付款：30%（合同签订后15工作日内）</div>
                    <div>到货款：60%（验收合格后30工作日内）</div>
                    <div>质保金：10%（质保期满后30工作日内）</div>
                  </div>
                </td>
                <td></td>
              </tr>
              <tr>
                <td><strong>联系方式</strong></td>
                <td>
                  <div class="contact-info">
                    <div>李先生 (招标代理机构)</div>
                    <div>电话：010-88886666</div>
                    <div>邮箱：zb@zhuoyuepm.com</div>
                  </div>
                </td>
                <td></td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 条款语义分析内容 -->
        <div v-if="activeTab === 'semantic'" class="file-semantic">
          <h2>招标条款深度语义分析</h2>
          
          <div class="semantic-container">
            <div class="semantic-card">
              <div class="semantic-header resource-header">
                <div class="semantic-icon">📋</div>
                <h3>资格要求解析</h3>
              </div>
              <div class="semantic-content">
                <div class="feature-item">
                  <div class="feature-badge">A+</div>
                  <div class="feature-content">
                    <h4>核心要求</h4>
                    <p>独立法人资格、注册资本≥5000万、ISO三体系认证是准入门槛。过往业绩要求具体且严格，须提供2021年后的3个500万以上变压器项目，为明确的淘汰项。</p>
                  </div>
                </div>
                <div class="feature-item">
                  <div class="feature-badge">⚖️</div>
                  <div class="feature-content">
                    <h4>隐性偏好</h4>
                    <p>从"环氧树脂浇注"和"产品整体温升应按H级考核"等技术要求可分析，招标方倾向于选择技术实力雄厚、生产工艺先进的大型制造商。</p>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="semantic-card">
              <div class="semantic-header tech-header">
                <div class="semantic-icon">🔍</div>
                <h3>技术要求精析</h3>
              </div>
              <div class="semantic-content">
                <div class="feature-item">
                  <div class="feature-badge">⭐</div>
                  <div class="feature-content">
                    <h4>关键参数识别</h4>
                    <p>本次招标明确要求"一级能效"变压器，且强调"产品整体温升应按H级考核"，这是对产品性能的高标准要求，暗示招标方注重长期运行成本而非一次性采购价格。</p>
                  </div>
                </div>
                <div class="feature-item">
                  <div class="feature-badge">⚠️</div>
                  <div class="feature-content">
                    <h4>潜在风险点</h4>
                    <p>招标方强调"箔式线圈采用优质铜箔绕制"，这是较高的工艺要求，成本更高，需在报价中充分考虑。技术要求可能导致10-15%的成本上升。</p>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="semantic-card">
              <div class="semantic-header commerce-header">
                <div class="semantic-icon">💼</div>
                <h3>商务条款解读</h3>
              </div>
              <div class="semantic-content">
                <div class="feature-item">
                  <div class="feature-badge">💰</div>
                  <div class="feature-content">
                    <h4>付款条件评估</h4>
                    <p>30%-60%-10%的付款比例相对合理，但若产品定制化程度高，可尝试协商提高预付款比例。注意：质保金10%在行业中处于合理水平，但回收周期长达24个月。</p>
                  </div>
                </div>
                <div class="feature-item">
                  <div class="feature-badge">⏱️</div>
                  <div class="feature-content">
                    <h4>交付风险分析</h4>
                    <p>60日历日的交付期限在大型变压器制造中较为紧张，加之有每日0.5%（上限5%）的延期罚款，建议在投标文件中明确可能影响交期的不可抗力因素，并预留充足生产周期。</p>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="semantic-card">
              <div class="semantic-header strategy-header">
                <div class="semantic-icon">🎯</div>
                <h3>竞标策略建议</h3>
              </div>
              <div class="semantic-content">
                <div class="feature-item">
                  <div class="feature-badge">✅</div>
                  <div class="feature-content">
                    <h4>竞争优势打造</h4>
                    <p>重点突出生产能力、技术先进性和能效等级认证。考虑到招标方为"智慧城市数据中心"，可强调产品在数据中心应用的成功案例和可靠性数据，提供针对性解决方案。</p>
                  </div>
                </div>
                <div class="feature-item">
                  <div class="feature-badge">💡</div>
                  <div class="feature-content">
                    <h4>差异化策略</h4>
                    <p>在投标文件中增加"数据中心变压器运行状态监测系统"等智能化增值服务，与标准产品供应商形成差异化竞争，提高中标可能性。</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 合规性检查内容 -->
        <div v-if="activeTab === 'compliance'" class="file-compliance">
          <h2>合规性检查报告</h2>
          
          <div class="compliance-section">
            <h4>一、总体评估</h4>
            <p class="summary compliant">经初步审查，该招标文件整体框架基本符合标准招标流程，但在部分条款的设定上存在一定的模糊性和潜在排他性风险。建议投标人在准备投标文件时，对风险点予以特别关注或提出澄清请求。</p>
          </div>

          <div class="compliance-section">
            <h4>二、风险项分析</h4>
            
            <div class="risk-item">
              <div class="risk-title warning">
                <span class="risk-icon">⚠️</span>
                <strong>风险等级：中</strong> - 业绩要求过高可能构成隐性排他性
              </div>
              <p class="risk-description">
                <strong>条款位置：</strong> 二、供应商资格要求 第6条<br/>
                <strong>条款内容：</strong> "投标人2021年1月1日以来单个合同额1000万元及以上的类似项目..."<br/>
                <strong>合规分析：</strong> 根据《招标投标法实施条例》第三十二条，招标人设定的资格、技术、商务条件不得含有排斥不同所有制或者不同地区潜在投标人的内容。虽然设置业绩要求是合法的，但1000万元的单个合同额门槛相对较高，可能无形中将具备同等技术能力但历史合同额较小的潜在投标人排除在外。
              </p>
            </div>

            <div class="risk-item">
              <div class="risk-title warning">
                <span class="risk-icon">⚠️</span>
                <strong>风险等级：中</strong> - 关键商务条款缺失
              </div>
              <p class="risk-description">
                <strong>条款位置：</strong> 全文<br/>
                <strong>条款内容：</strong> 文件中未明确约定付款方式、付款节点、以及详细的质保期和服务要求。<br/>
                <strong>合规分析：</strong> 缺少关键商务条款会增加合同履行的不确定性。付款条件是合同的核心利益，质保期是产品质量保障的关键。这些条款的缺失可能导致后期双方产生争议，建议在投标前通过书面形式向招标人或代理机构寻求澄清。
              </p>
            </div>

            <div class="risk-item">
              <div class="risk-title info">
                <span class="risk-icon">ℹ️</span>
                <strong>风险等级：低</strong> - 未设置最高投标限价
              </div>
              <p class="risk-description">
                <strong>条款位置：</strong> 三、投标信息 第5条<br/>
                <strong>条款内容：</strong> "项目预算/最高限价: 无"<br/>
                <strong>合规分析：</strong> 虽然法律未强制要求所有项目必须设置最高限价，但对于企业自筹资金项目，不设限价可能导致投标报价无序竞争。投标人报价时需更加谨慎，充分考虑成本和利润，避免因信息不完整造成报价失误。
              </p>
            </div>
          </div>

          <div class="compliance-section">
            <h4>三、综合建议</h4>
            <ul class="suggestions-list">
              <li><strong>建议1：</strong> 针对"高额业绩要求"条款，评估自身是否满足，如不满足但认为自身有能力完成项目，可考虑在投标文件中突出展示技术优势和同类项目经验（即使合同额未达要求）。</li>
              <li><strong>建议2：</strong> 务必在"投标文件截止时间"前，就"付款条件"、"质保期"等缺失的关键信息向招标代理机构（天勤工程咨询有限公司）发出书面澄清函。</li>
              <li><strong>建议3：</strong> 鉴于无最高限价，报价策略应趋于保守，确保在覆盖所有成本的基础上留有合理利润空间。</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧对话区域 -->
    <div class="chat-area" :style="{ width: (100 - leftWidth) + '%', paddingRight: sidebarOpen ? '220px' : '0' }">
      <!-- 系统标题 -->
      <div class="system-title" v-if="messages.length === 0">
        <img src="../assets/img/系统图标.png" alt="系统图标" class="system-logo">
        <h2>招标文件智析系统</h2>
      </div>
      
      <!-- 对话显示区域 -->
      <div class="messages-container" ref="messagesContainer" :class="{ 'with-sidebar': sidebarOpen }">
        <div v-for="(message, index) in messages" :key="index" class="message" :class="message.type">
          <div class="message-content">{{ message.content }}</div>
          <div class="message-time">{{ message.time }}</div>
        </div>
      </div>

      <!-- 输入区域 -->
      <div class="input-area" :class="{ 'with-sidebar': sidebarOpen, 'moved-down': messages.length > 0 }">
        <div class="message-input-container">
          <textarea 
            class="message-input" 
            v-model="messageInput" 
            placeholder="向AI提问..." 
            @keyup.enter="sendMessage"
          ></textarea>
          <div class="suggestion-toggle-btn" @click="toggleSuggestionCard">✨</div>
          <div class="message-counter">{{ messageInput.length }}/200</div>
          <div class="send-btn" @click="sendMessage">
            <img src="../assets/icons/发送.svg" alt="发送" />
          </div>
        </div>
      </div>

      <!-- 侧边栏切换按钮 -->
      <div class="sidebar-toggle" @click="toggleSidebar" v-if="!sidebarOpen">
        <img src="../assets/icons/展开侧边栏.svg" alt="展开侧边栏" class="sidebar-icon" />
      </div>

      <!-- Draggable Suggestion Card -->
      <div v-if="showSuggestionCard" 
        class="suggestion-card" 
        :style="{ top: cardPosition.y + 'px', left: cardPosition.x + 'px' }" 
        @mousedown="dragMouseDown">
        <div class="card-drag-handle"></div>
        <div class="bubbles-container">
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
        </div>
        <div 
          v-for="chip in suggestionChips"
          :key="chip.text"
          class="suggestion-chip"
          :class="chip.className"
          @click.stop="handleSuggestionClick(chip)"
        >
          <span>{{ chip.text }}</span>
        </div>
      </div>
      
      <!-- 历史对话侧边栏 -->
      <div class="history-sidebar" :class="{ 'open': sidebarOpen }">
        <div class="history-header">
          <div class="sidebar-close" @click="toggleSidebar">
            <img src="../assets/icons/收起侧边栏.svg" alt="收起侧边栏" />
          </div>
          <h3>历史问答</h3>
        </div>
        <div class="history-list">
          <div 
            v-for="(item, index) in historyItems" 
            :key="index" 
            class="history-item"
            :class="{ 'active': currentHistoryId === item.id, 'hover': item.hover }"
            @mouseenter="item.hover = true"
            @mouseleave="item.hover = false"
            @click="selectHistory(item.id)"
          >
            <div class="history-title">{{ item.title }}</div>
            <div class="history-date">{{ item.date }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, watch, nextTick } from 'vue';
import { useRouter } from 'vue-router';

export default {
  name: 'AIChat',
  setup() {
    const router = useRouter();
    const activeTab = ref('original');
    const showDirectory = ref(false);
    const messageInput = ref('');
    const messagesContainer = ref(null);
    const sidebarOpen = ref(false);
    const currentHistoryId = ref(1);
    const isScanning = ref(true);
    const leftWidth = ref(50); // 默认左侧占50%
    const isResizing = ref(false);
    const fileContentRef = ref(null);
    const showSuggestionCard = ref(false);
    const cardPosition = ref({ x: 0, y: 0 });
    const dragging = ref(false);
    const offset = ref({ x: 0, y: 0 });

    const suggestionChips = reactive([
      { text: '预算金额', className: 'chip-blue' },
      { text: '招标编号', className: 'chip-green' },
      { text: '项目名称', className: 'chip-purple' },
      { text: '技术参数', className: 'chip-orange' },
      { text: '评分标准', className: 'chip-pink' },
      { text: '资质要求', className: 'chip-yellow' },
    ]);

    const directoryItems = ref([
      { id: 'chapter-1', title: '第一章 总则', hover: false },
      { id: 'chapter-2', title: '第二章 投标人资格要求', hover: false },
      { id: 'chapter-3', title: '第三章 技术规格与要求', hover: false },
      { id: 'chapter-4', title: '第四章 商务要求', hover: false },
      { id: 'chapter-5', title: '第五章 投标文件要求', hover: false },
    ]);

    const historyItems = reactive([
      { id: 1, title: '投标文件要求分析', date: '2024-06-22', hover: false },
      { id: 2, title: '技术参数核查', date: '2024-06-21', hover: false },
      { id: 3, title: '预算金额分析', date: '2024-06-20', hover: false },
      { id: 4, title: '竞争对手调研', date: '2024-06-19', hover: false },
      { id: 5, title: '投标策略制定', date: '2024-06-18', hover: false },
      { id: 6, title: '供应商资质审核', date: '2024-06-17', hover: false },
      { id: 7, title: '项目时间节点分析', date: '2024-06-16', hover: false },
      { id: 8, title: '投标文件条款解读', date: '2024-06-15', hover: false },
      { id: 9, title: '招标方背景调研', date: '2024-06-14', hover: false },
      { id: 10, title: '类似项目案例分析', date: '2024-06-13', hover: false },
      { id: 11, title: '投标报价策略讨论', date: '2024-06-12', hover: false },
      { id: 12, title: '技术方案初步讨论', date: '2024-06-11', hover: false },
      { id: 13, title: '投标文件中标可能性分析', date: '2024-06-10', hover: false },
      { id: 14, title: '项目风险评估', date: '2024-06-09', hover: false },
      { id: 15, title: '投标文件重点条款摘录', date: '2024-06-08', hover: false },
    ]);

    const messages = reactive([]);

    const navigateToHome = () => {
      router.push('/');
    };

    const sendMessage = () => {
      if (!messageInput.value.trim()) return;

      const now = new Date();
      const timeString = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
      
      messages.push({
        type: 'user',
        content: messageInput.value,
        time: timeString
      });

      setTimeout(() => {
        messages.push({
          type: 'system',
          content: getAIResponse(messageInput.value),
          time: timeString
        });
        scrollToBottom();
      }, 1000);

      messageInput.value = '';
    };

    const getAIResponse = (message) => {
      const lowerMessage = message.toLowerCase();
      
      if (lowerMessage.includes('投标') && lowerMessage.includes('资格')) {
        return '根据招标文件，投标人需要满足以下资格条件：1. 具有独立法人资格；2. 有有效的营业执照；3. 财务状况良好；4. 产品技术成熟；5. 产品有CCC认证；6. 有类似业绩证明；7. 非失信被执行人；8. 未被济宁市暂停投标资格。';
      } else if (lowerMessage.includes('截止') || lowerMessage.includes('时间')) {
        return '本次招标的投标文件提交截止时间是2024年5月7日09:00(北京时间)，开标时间也是同一时间。';
      } else if (lowerMessage.includes('技术') || lowerMessage.includes('参数')) {
        return '本次招标的主要技术要求是10kV干式变压器，型号为SCB18-2500KVA，数量为2台。投标人需提供有效的CCC证书、CCC检测报告，以及型式试验报告和一级能效相关证明材料。';
      } else if (lowerMessage.includes('预算') || lowerMessage.includes('金额')) {
        return '本招标文件未明确说明具体预算金额，招标文件中注明"无(资金来源为企业自筹)"。';
      } else {
        return '对于您的问题，我需要在招标文件中查找更多相关信息。您可以尝试更具体地描述您的问题，或者查看页面左侧的招标原文、结构化信息或条款语义分析来获取更多细节。';
      }
    };

    const handleSuggestionClick = (chip) => {
      messageInput.value = chip.text;
      sendMessage();
    };

    const scrollToBottom = async () => {
      await nextTick();
      if (messagesContainer.value) {
        messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
      }
    };

    const toggleSidebar = () => {
      sidebarOpen.value = !sidebarOpen.value;
    };

    const selectHistory = (id) => {
      currentHistoryId.value = id;
    };

    watch(messages, () => {
      scrollToBottom();
    });

    const startResize = (e) => {
      isResizing.value = true;
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', stopResize);
      e.preventDefault();
    };
    
    const handleMouseMove = (e) => {
      if (!isResizing.value) return;
      const container = document.querySelector('.aichat-container');
      const containerWidth = container.getBoundingClientRect().width;
      const newLeftWidth = (e.clientX / containerWidth) * 100;
      leftWidth.value = Math.max(20, Math.min(80, newLeftWidth));
    };
    
    const stopResize = () => {
      isResizing.value = false;
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', stopResize);
    };

    const syncedScrollAnimation = (startTime) => {
      if (!isScanning.value) return;

      const currentTime = Date.now();
      const elapsedTime = currentTime - startTime;
      const duration = 8000;
      const progress = Math.min(elapsedTime / duration, 1);

      if (fileContentRef.value) {
        const maxScroll = fileContentRef.value.scrollHeight - fileContentRef.value.clientHeight;
        fileContentRef.value.scrollTop = maxScroll * progress;
      }

      if (progress < 1) {
        requestAnimationFrame(() => syncedScrollAnimation(startTime));
      }
    };

    const toggleSuggestionCard = async () => {
      showSuggestionCard.value = !showSuggestionCard.value;
      if (showSuggestionCard.value) {
        await nextTick();
        const cardEl = document.querySelector('.suggestion-card');
        if (cardEl) {
            const cardRect = cardEl.getBoundingClientRect();
            cardPosition.value = {
                x: (window.innerWidth / 2) - (cardRect.width / 2),
                y: (window.innerHeight / 2) - (cardRect.height / 2),
            };
        }
      }
    }

    const dragMouseDown = (e) => {
      e.preventDefault();
      dragging.value = true;
      offset.value = {
        x: e.clientX - cardPosition.value.x,
        y: e.clientY - cardPosition.value.y
      };
      document.addEventListener('mousemove', elementDrag);
      document.addEventListener('mouseup', closeDragElement);
    };

    const elementDrag = (e) => {
      if (dragging.value) {
        e.preventDefault();
        cardPosition.value = {
          x: e.clientX - offset.value.x,
          y: e.clientY - offset.value.y
        };
      }
    };

    const closeDragElement = () => {
      dragging.value = false;
      document.removeEventListener('mousemove', elementDrag);
      document.removeEventListener('mouseup', closeDragElement);
    };

    const scrollToChapter = (chapterId) => {
      const element = document.getElementById(chapterId);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    };

    onMounted(() => {
      scrollToBottom();
      
      if (isScanning.value) {
        requestAnimationFrame(() => syncedScrollAnimation(Date.now()));
      }
      
      setTimeout(() => {
        isScanning.value = false;
      }, 8000);
    });

    return {
      activeTab,
      showDirectory,
      directoryItems,
      messageInput,
      messages,
      messagesContainer,
      sidebarOpen,
      historyItems,
      currentHistoryId,
      isScanning,
      leftWidth,
      fileContentRef,
      suggestionChips,
      showSuggestionCard,
      cardPosition,
      navigateToHome,
      sendMessage,
      toggleSidebar,
      toggleSuggestionCard,
      selectHistory,
      startResize,
      handleSuggestionClick,
      dragMouseDown,
      scrollToChapter
    };
  }
};
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

.aichat-container {
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* 左侧文件显示区域 */
.file-display {
  width: 50%;
  height: 100%;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  position: relative;
  border-right: 1px solid #e0e0e0;
}

.file-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid #e0e0e0;
  position: relative;
  background-color: white;
}

.left-nav {
  display: flex;
  align-items: center;
}

.back-btn {
  width: 24px;
  height: 24px;
  cursor: pointer;
  margin-right: 20px;
}

.back-btn img {
  width: 100%;
  height: 100%;
}

.tab-buttons {
  display: flex;
}

.tab-btn {
  padding: 8px 16px;
  margin: 0 5px;
  border: none;
  border-radius: 4px;
  background-color: #30A0E0;
  color: white;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.tab-btn.active {
  background-color: #405AE5;
}

.directory-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
  position: relative;
}

.directory-icon img {
  width: 100%;
  height: 100%;
}

/* 文件内容区域 */
.file-content {
  flex-grow: 1;
  overflow-y: auto;
  position: relative;
  padding: 20px 30px;
  margin: 15px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}
.file-content.no-scroll {
  overflow-y: hidden;
}

.file-original, .file-structured, .file-semantic {
  line-height: 1.6;
}

/* 添加这些样式以修复非原文内容的滚动问题 */
.file-structured, .file-semantic, .file-compliance {
  height: 100%;
  overflow-y: auto;
}

/* 确保非原文内容在容器内垂直居中，不需要滚动 */
.file-content.no-scroll .file-structured,
.file-content.no-scroll .file-semantic,
.file-content.no-scroll .file-compliance {
  overflow-y: auto;
  max-height: 100%;
}

.file-original h2, .file-structured h2, .file-semantic h2 {
  color: #333;
  margin-bottom: 20px;
}

.file-original h3, .file-structured h3, .file-semantic h3 {
  color: #444;
  margin-top: 16px;
  margin-bottom: 10px;
}

.file-original p, .file-structured p, .file-semantic p {
  margin-bottom: 8px;
}

/* 扫描线动画 */
.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px; /* 增加线条厚度 */
  background: linear-gradient(180deg, rgba(64, 149, 229, 0) 0%, rgba(64, 149, 229, 0.9) 50%, rgba(64, 149, 229, 0) 100%);
  box-shadow: 0 0 15px 2px rgba(64, 149, 229, 0.6);
  z-index: 100;
  animation: scan 8s linear forwards;
  filter: blur(1px); /* 添加模糊效果以增强光晕感 */
}

@keyframes scan {
  0% {
    top: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* 目录显示 */
.directory-container {
  position: absolute;
  top: 30px;
  right: 0;
  width: 250px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(15, 64, 245, 0.59);
  padding: 15px;
  z-index: 1000;
}

.directory-item {
  cursor: pointer;
  padding: 8px 12px;
  transition: all 0.3s ease;
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 15px;
}

.directory-item:hover, .directory-item.hover {
  background-color: #f0f8ff;
  color: #0066FF;
  font-size: 16.5px;
  font-weight: 600;
  transform: translateX(5px);
  box-shadow: 0 2px 6px rgba(0, 102, 255, 0.25);
}

/* 可调整宽度的拖动线 */
.resizer {
  width: 6px;
  background-color: #e0e0e0;
  cursor: col-resize;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 500;
  transition: background-color 0.3s;
  transform: translateX(-50%);
}

.resizer:hover {
  background-color: #4095E5;
}

/* 扫描效果 */
.scanning-active {
  position: relative;
  overflow: hidden;
}

.scanning-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 50%, rgba(64, 149, 229, 0.15) 0%, rgba(64, 149, 229, 0) 70%);
  z-index: 1;
  animation: pulse-halo 4s ease-in-out infinite;
}

@keyframes pulse-halo {
  0% {
    transform: scale(0.95);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.6;
  }
}

.document-content {
  position: relative;
  z-index: 2;
}

/* 四个蓝色边角 */
.corner-decoration {
  position: absolute;
  width: 25px;
  height: 25px;
  border-color: #405AE5;
  border-style: solid;
  border-width: 0;
  z-index: 101;
}

.top-left {
  top: 0;
  left: 0;
  border-top-width: 3px;
  border-left-width: 3px;
  border-top-left-radius: 3px;
}

.top-right {
  top: 0;
  right: 0;
  border-top-width: 3px;
  border-right-width: 3px;
  border-top-right-radius: 3px;
}

.bottom-left {
  bottom: 0;
  left: 0;
  border-bottom-width: 3px;
  border-left-width: 3px;
  border-bottom-left-radius: 3px;
}

.bottom-right {
  bottom: 0;
  right: 0;
  border-bottom-width: 3px;
  border-right-width: 3px;
  border-bottom-right-radius: 3px;
}

/* 系统标题 */
.system-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  position: relative;
  top: 35%; /* 向上移动一点 */
  transform: translateY(-50%);
}

.system-title img {
  width: 80px;
  height: 80px;
  margin-right: 15px;
}

.system-title h2 {
  color: #13227A;
  font-size: 28px;
  font-weight: bold;
}

/* 右侧对话区域 */
.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: #f5f7fa;
  transition: padding-right 0.3s;
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  padding-left: 5%; /* 统一左侧边距 */
  padding-right: 5%; /* 统一右侧边距 */
  padding-top: 60px;
  padding-bottom: 150px;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  transition: padding-right 0.3s, padding-bottom 0.5s ease-in-out;
}

.messages-container.with-sidebar {
  padding-right: 5%; /* 保持相同的右侧边距 */
}

.message {
  margin-bottom: 20px;
  max-width: 80%;
}

.message.system {
  align-self: flex-start;
  margin-right: auto; /* 确保系统消息左对齐 */
}

.message.user {
  align-self: flex-end;
  margin-left: auto; /* 确保用户消息右对齐 */
}

.message-content {
  padding: 12px 16px;
  border-radius: 12px;
  position: relative;
  line-height: 1.5;
  word-break: break-all; /* 强制长文本换行 */
}

.message.system .message-content {
  background-color: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.message.user .message-content {
  background-color: #4095E5;
  color: white;
  box-shadow: 0 2px 6px rgba(64, 149, 229, 0.3);
}

.message-time {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  text-align: right;
}

/* 输入区域 */
.input-area {
  position: absolute;
  bottom: 20%;
  left: 5%; /* 与消息区域左边对齐 */
  width: 90%;
  display: flex;
  align-items: center;
  transition: width 0.3s, left 0.3s, bottom 0.5s ease-in-out;
}

.input-area.moved-down {
  bottom: 30px;
}

.input-area.with-sidebar {
  width: calc(100% - 220px - 10%); /* 减去侧边栏宽度和左右边距 */
  left: 5%;
}

.message-input-container {
  position: relative;
  width: 100%;
  border-radius: 12px;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding-right: 0;
  overflow: hidden;
}

.message-input {
  width: 100%;
  border: none;
  padding: 15px;
  padding-right: 100px; /* 增加右侧空间 */
  border-radius: 12px;
  background-color: white;
  outline: none;
  resize: none;
  min-height: 100px; /* 增加输入框最小高度 */
  max-height: 180px; /* 增加输入框最大高度 */
  font-family: inherit;
  box-sizing: border-box;
}

.send-btn {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #4095E5;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10; /* 确保发送按钮在最上层 */
}

.send-btn img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

.message-counter {
  position: absolute;
  bottom: 23px; /* 调整位置与更大的输入框匹配 */
  right: 60px;
  font-size: 12px;
  color: #999;
}

.suggestion-toggle-btn {
  position: absolute;
  bottom: 60px; /* 定位在发送按钮上方 */
  right: 15px; /* 与发送按钮右侧对齐 */
  width: 35px; /* 与发送按钮同宽以便居中 */
  height: 35px; /* 创建一个方形区域 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  cursor: pointer;
  padding: 0; /* 移除内边距，由flexbox处理居中 */
  transition: transform 0.2s ease-in-out;
}

.suggestion-toggle-btn:hover {
  transform: scale(1.2) rotate(10deg);
}

/* 侧边栏切换按钮 */
.sidebar-toggle {
  position: fixed;
  top: 20px;
  right: 10px; /* 更靠右的位置 */
  width: 24px;
  height: 24px;
  cursor: pointer;
  z-index: 900;
  transition: all 0.3s;
}

.sidebar-toggle img {
  width: 100%;
  height: 100%;
  filter: invert(31%) sepia(0%) saturate(0%) hue-rotate(143deg) brightness(92%) contrast(85%);
}

.sidebar-icon {
  filter: invert(31%) sepia(0%) saturate(0%) hue-rotate(143deg) brightness(32%) contrast(85%);
}

/* 历史对话侧边栏 */
.history-sidebar {
  position: fixed;
  top: 0;
  right: -220px; /* 默认在视图外，即关闭状态 */
  width: 220px;
  height: 100%;
  background-color: white;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  transition: right 0.3s;
  z-index: 800;
  border-radius: 20px 0 0 20px;
}

.history-sidebar.open {
  right: 0;
}

.history-header {
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
}

.sidebar-close {
  width: 24px;
  height: 24px;
  cursor: pointer;
  margin-right: 20px;
}

.sidebar-close img {
  width: 100%;
  height: 100%;
  filter: invert(31%) sepia(0%) saturate(0%) hue-rotate(143deg) brightness(32%) contrast(85%);
}

.history-header h3 {
  margin: 0;
  color: #333;
  flex: 1;
  text-align: center;
}

.history-list {
  padding: 10px;
  overflow-y: auto;
  height: calc(100% - 60px);
}

.history-item {
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.history-item.active {
  background-color: rgba(15, 64, 149, 0.2);
}

.history-item.hover {
  background-color: rgba(64, 149, 229, 0.15);
}

.history-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.history-date {
  font-size: 12px;
  color: #999;
}

.suggestion-card {
  position: fixed; 
  z-index: 1100;
  background: linear-gradient(160deg, rgba(235, 245, 255, 0.7) 0%, rgba(225, 235, 250, 0.7) 100%);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(100, 150, 200, 0.25),
              inset 0 0 0 1px rgba(255, 255, 255, 0.6),
              inset 0 0 0 2px rgba(0, 0, 0, 0.05);
  padding: 16px;
  padding-top: 28px; 
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 8px;
  cursor: move;
  overflow: hidden;
  width: 210px; 
  transition: all 0.3s ease;
}

.card-drag-handle {
    position: absolute;
    top: 10px; 
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
}

.suggestion-chip {
  padding: 5px 8px;
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Varela Round', sans-serif;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease-out;
  text-align: center;
  position: relative;
  z-index: 2; 
  border: 1px solid rgba(255, 255, 255, 0.2); 
}

.suggestion-chip span {
  background: linear-gradient(180deg, #4B5563 0%, #6B7280 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.suggestion-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* 多彩马卡龙按钮 */
.suggestion-chip.chip-blue { background-color: rgba(160, 195, 255, 0.7); }
.suggestion-chip.chip-green { background-color: rgba(167, 220, 178, 0.7); }
.suggestion-chip.chip-purple { background-color: rgba(195, 177, 225, 0.7); }
.suggestion-chip.chip-orange { background-color: rgba(255, 205, 164, 0.7); }
.suggestion-chip.chip-pink { background-color: rgba(255, 183, 178, 0.7); }
.suggestion-chip.chip-yellow { background-color: rgba(255, 238, 162, 0.7); }

.suggestion-chip.chip-blue:hover { background-color: rgba(160, 195, 255, 0.9); }
.suggestion-chip.chip-green:hover { background-color: rgba(167, 220, 178, 0.9); }
.suggestion-chip.chip-purple:hover { background-color: rgba(195, 177, 225, 0.9); }
.suggestion-chip.chip-orange:hover { background-color: rgba(255, 205, 164, 0.9); }
.suggestion-chip.chip-pink:hover { background-color: rgba(255, 183, 178, 0.9); }
.suggestion-chip.chip-yellow:hover { background-color: rgba(255, 238, 162, 0.9); }

.bubbles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.bubble {
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: rise 10s infinite ease-in;
}

.bubble:nth-child(1) { width: 20px; height: 20px; left: 10%; animation-duration: 8s; animation-delay: 0s; }
.bubble:nth-child(2) { width: 30px; height: 30px; left: 30%; animation-duration: 12s; animation-delay: 2s; }
.bubble:nth-child(3) { width: 15px; height: 15px; left: 70%; animation-duration: 7s; animation-delay: 4s; }
.bubble:nth-child(4) { width: 25px; height: 25px; left: 90%; animation-duration: 10s; animation-delay: 1s; }
.bubble:nth-child(5) { width: 35px; height: 35px; left: 50%; animation-duration: 9s; animation-delay: 3s; }

@keyframes rise {
    0% {
        bottom: -50px;
        transform: translateX(0);
        opacity: 0.8;
    }
    50% {
        transform: translateX(20px);
    }
    100% {
        bottom: 108%;
        transform: translateX(-20px);
        opacity: 0;
    }
}

.file-compliance {
  padding: 20px 30px;
  color: #333;
}

.file-compliance h2 {
  font-size: 24px;
  margin-bottom: 25px;
  color: #2c3e50;
  text-align: center;
  font-weight: 600;
}

.compliance-section {
  margin-bottom: 25px;
}

.compliance-section h4 {
  font-size: 18px;
  color: #34495e;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 2px solid #e0e6ed;
}

.summary {
  background-color: #f4f8ff;
  border-left: 5px solid #4a90e2;
  padding: 15px;
  border-radius: 4px;
  line-height: 1.7;
}

.risk-item {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  margin-bottom: 15px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.risk-title {
  padding: 12px 15px;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  font-size: 16px;
}

.risk-title.warning {
  background-color: #fffbe6;
  color: #d48806;
}

.risk-title.info {
  background-color: #e6f7ff;
  color: #096dd9;
}

.risk-icon {
  font-size: 20px;
  margin-right: 10px;
}

.risk-description {
  padding: 15px;
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
  color: #495057;
}

.risk-description strong {
  color: #343a40;
}

.suggestions-list {
  list-style-type: none;
  padding-left: 0;
}

.suggestions-list li {
  background-color: #f8f9fa;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 10px;
  line-height: 1.7;
  font-size: 14px;
}
.suggestions-list li strong {
  color: #007bff;
}

.document-content h2 {
  text-align: center;
  margin-bottom: 30px;
}
.document-content h3 {
  margin-top: 25px;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}
.document-content p {
  line-height: 1.8;
  margin-bottom: 12px;
}

/* 招标原文中的表格样式 */
.tender-spec-table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
    font-size: 14px;
}
.tender-spec-table th, .tender-spec-table td {
    border: 1px solid #ddd;
    padding: 10px 14px;
    text-align: center;
}
.tender-spec-table th {
    background-color: #f7f9fc;
    font-weight: 600;
}
.tender-spec-table tbody tr:hover {
  background-color: #f1f3f5;
}

/* 结构化信息抽取表格样式 */
.structured-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
  margin: 20px 0;
  background-color: #fff;
}

.structured-table th {
  background-color: #405AE5;
  color: white;
  padding: 15px;
  text-align: left;
  font-weight: 600;
  font-size: 16px;
}

.structured-table td {
  padding: 15px;
  border-bottom: 1px solid #ececec;
  vertical-align: top;
}

.structured-table tr:hover {
  background-color: #f8fbff;
}

.structured-table tr:last-child td {
  border-bottom: none;
}

.note {
  font-size: 14px;
  color: #666;
  font-style: italic;
}

.note-important {
  color: #e53e3e;
  font-weight: 500;
}

.tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.tag-primary {
  background-color: #ebf5ff;
  color: #3182ce;
}

.tag-warning {
  background-color: #fffbea;
  color: #d69e2e;
}

.tag-danger {
  background-color: #fff5f5;
  color: #e53e3e;
}

.tag-info {
  background-color: #e6fffa;
  color: #319795;
}

.device-info, .payment-terms, .contact-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.device-item {
  background-color: #f7fafc;
  padding: 5px 10px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 14px;
}

/* 条款语义分析样式 */
.semantic-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 10px;
}

.semantic-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.semantic-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.semantic-header {
  padding: 20px;
  display: flex;
  align-items: center;
  color: white;
}

.resource-header {
  background: linear-gradient(45deg, #4776E6, #8E54E9);
}

.tech-header {
  background: linear-gradient(45deg, #36D1DC, #5B86E5);
}

.commerce-header {
  background: linear-gradient(45deg, #FF8008, #FFC837);
}

.strategy-header {
  background: linear-gradient(45deg, #11998e, #38ef7d);
}

.semantic-icon {
  font-size: 24px;
  margin-right: 15px;
}

.semantic-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.semantic-content {
  padding: 20px;
}

.feature-item {
  display: flex;
  margin-bottom: 20px;
}

.feature-item:last-child {
  margin-bottom: 0;
}

.feature-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
  font-size: 18px;
}

.feature-content h4 {
  margin: 0 0 8px 0;
  color: #2d3748;
  font-size: 16px;
  font-weight: 600;
}

.feature-content p {
  margin: 0;
  color: #4a5568;
  line-height: 1.6;
  font-size: 14px;
}
</style> 